<template>
    <div class="comment">
        <!-- 顶部 -->
        <div class="header">
            <h3>评论</h3>
            <span class="num">共{{commentInfo.total}}条评论</span>
        </div>
        <div class="mainer">
            <!-- 发表评论区 -->
            <div class="flag">
                <div class="head">
                    <img
                            :src="userImg" v-if="userImg != ''"
                    />
                    <img v-else src="https://p3.music.126.net/dwslx7VNYE-h8TP0VkBxcg==/109951165800028895.jpg?param=50y50">
                </div>

                <div class="txt">
                    <textarea class="u-txt" cols="30" rows="10" placeholder="留下点什么吧..." v-model="content" @input="vaildCount"></textarea>
                    <em class="arrline">◆</em>
                    <em class="arrline-shadow">◆</em>
                    <div class="shadow"></div>
                </div>
                <div class="btns">
                    <div class="face-smile">
                        <div @click="openEmojis">
                            <i class="emjoy" ></i>
                        </div>
                        <ul v-if="isShowEmoji">
                            <li v-for="(item, index) in faceList" :key="index" @click="insertEmoji(item)">{{ item }}</li>
                        </ul>
                    </div>

                    <a @click="handleSubmit">评论</a>
                    <span>{{count}}</span>
                </div>
                <!-- 表情框 -->
            </div>
            <!-- 热门评论 -->
            <div class="new">
                <h3 class="hd">精彩评论</h3>
                <div class="itm" v-for="com,index in comments" :key="index">
                    <div class="avatar">
                        <img :src="com.user.avatar">
                    </div>
                    <div class="cntwrap">
                        <div class="cnt">
                            <a>{{com.user.nickname}}</a>：
                            <span  v-html="com.content"> </span>
                            <div class="que" v-show="com.beReplied" v-for="item,index in com.beReplied" :key="index">
                                <a class="fc" >@{{item.user.nickname}}</a>
                                <span >：{{item.content}}</span>
                            </div>
                        </div>
                        <div class="rp">
                            <span class="time">
                              {{com.createTime}}
                            </span>
                            <a class="fc" @click="replyOpen(com.id,com.userUid,com.user.nickname,com.targetUid)">回复</a>
                            <span class="sep">|</span>
                            <a class="like">
                                <i class="zan"></i>
                                <span ></span>
                            </a>
                            <span class="sep" v-if="userId == com.userUid">|</span>
                            <a class="fc"  v-if="userId == com.userUid" @click="removeComment(com.id,com.userUid,com.targetUid)">删除</a>
                        </div>
                        <div style="background:#cdcdcd;width: 100% " v-show="com.id==currentUid">
                            <div class="txt2">
                                <textarea class="u-txt" cols="20" rows="5" :placeholder="'回复 @' + tonickname + '：'" v-model="toContent" @input="limitCount"></textarea>
                                <em class="arrline2">◆</em>
                                <em class="arrline2-shadow">◆</em>
                                <div class="shadow2"></div>
                            </div>
                            <div class="btns2">
                                <div class="face-smile">
                                    <div @click="openReplyEmojis">
                                        <i class="emjoy2"></i>
                                    </div>
                                    <ul v-if="isShowReplyEmoji">
                                        <li v-for="(item, index) in faceList" :key="index" @click="insertReplyEmoji(item)">{{ item }}</li>
                                    </ul>
                                </div>
                                <a @click="insertReply(index,com)">回复</a>
                                <span>{{limitWord}}</span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import faceList from './emojis'
    export default {
        name: "comment",
        components: {},
        props: {
            // 父级组件传过来的评论列表
            comments: {
                type: Array,
                default: () => []
            },
            getCommentHot: {
                type:  Function,
                default: null
            },
            type: {
                type: Number
            },
            userInfo: {
                type: Object
            },
            // 回复的对象
            toInfo: {
                type: Object
            },
            // 博客信息
            commentInfo: {
                type: Object
            },
            showCancel: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                faceList,
                isShowEmoji: false,
                isShowReplyEmoji: false,
                searchParams:{
                    total:0,
                    pageSize:30,
                    pageNo:1,
                },
                tonickname:'',
                chooseEmoji: false,
                count: 150,
                limitWord: 150,
                content: "",
                isReplyModel: false,
                toContent: "",
                userImg: '',
                userId: "",
                currentUid: '',
                // 是否登录
                isLogin: false,
            }
        },
        methods: {
            openEmojis() {
                this.isShowEmoji = !this.isShowEmoji
            },
            openReplyEmojis() {
                this.isShowReplyEmoji = !this.isShowReplyEmoji
            },
            insertEmoji(emoji) {
                if (this.content=='') {
                    this.content = emoji
                } else {
                    this.content += emoji
                }
            },
            insertReplyEmoji(emoji) {
                if (this.toContent=='') {
                    this.toContent = emoji
                } else {
                    this.toContent += emoji
                }
            },
            replyOpen(id,userUid,nickname,targetUid){
                let fuid = localStorage.getItem('USERID');
                console.log(fuid)
                if(fuid==null||fuid==''){
                    this.$notify.error({
                        title: '警告',
                        message: '登录后才可以回复哦~',
                        offset: 100
                    });

                }
                else {
                    this.currentUid = id;
                    this.tonickname = nickname;
                }
            },
            insertReply(index,com){
                let userUid = localStorage.getItem('USERID');
                if(userUid==null||userUid=='') {
                    this.$notify.error({
                        title: '警告',
                        message: '登录后才可以评论哦~',
                        offset: 100
                    });
                    // 未登录，自动弹出登录框
                    this.$bus.$emit('appear')
                    return;
                }

                if(this.toContent =="") {
                    this.$notify.error({
                        title: '警告',
                        message: '评论内容不能为空哦~',
                        offset: 100
                    });
                    return;
                }
                let targetUid = "";

                let commentType = 0;
                // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
                let source = "";
                if(this.commentInfo) {
                    targetUid = this.commentInfo.targetUid;
                    source = this.commentInfo.source;
                    commentType = this.commentInfo.commentType;
                }
                let params = {
                    userUid: userUid,
                    toUid: com.id,
                    toUserUid: com.userId,
                    commentType: commentType,
                    content: this.toContent,
                    targetUid: targetUid,
                    source: source,
                }
                this.content = '';
                this.count = 150;
                this.$API.postComment(params).then(response => {
                    if (response.code==200){
                        this.getCommentHot();
                        this.currentUid='';
                    }else {
                        this.$notify.error({
                            title: '错误',
                            position:"top-right",
                            message: response.message,
                            offset: 100
                        });
                    }
                })
            },
            vaildCount: function() {
                let count = 150 - this.content.length;
                if(count <= 0) {
                    this.count = 0
                } else {
                    this.count = count;
                }
            },
            limitCount: function() {
                let count = 150 - this.toContent.length;
                if(count <= 0) {
                    this.limitWord = 0
                } else {
                    this.limitWord = count;
                }
            },

            addEmoji(key) {
                this.content += key;
            },
            handleSubmit() {
                let userUid = localStorage.getItem('USERID');
                if(userUid==null||userUid=='') {
                    this.$notify.error({
                        title: '警告',
                        message: '登录后才可以评论哦~',
                        offset: 100
                    });
                    // 未登录，自动弹出登录框
                    this.$bus.$emit('appear')
                    return;
                }

                if(this.content =="") {
                    this.$notify.error({
                        title: '警告',
                        message: '评论内容不能为空哦~',
                        offset: 100
                    });
                    return;
                }
                let toUserUid = "";
                let toUid = "";
                let targetUid = "";

                let commentType = 0;
                // 评论来源： MESSAGE_BOARD，ABOUT，BLOG_INFO 等 代表来自某些页面的评论
                let source = "";
                if(this.toInfo) {
                    toUserUid = this.toInfo.id;
                    toUid = this.toInfo.commentUid;
                }
                if(this.commentInfo) {
                    targetUid = this.commentInfo.targetUid;
                    source = this.commentInfo.source;
                    commentType = this.commentInfo.commentType;
                }
                let params = {
                    userUid: userUid,
                    toUid: toUid,
                    toUserUid: toUserUid,
                    commentType: commentType,
                    content: this.content,
                    targetUid: targetUid,
                    source: source,
                }
                this.content = '';
                this.count = 150;
                this.$API.postComment(params).then(response => {
                    if (response.code==200){
                        this.getCommentHot();
                    }else {
                        this.$notify.error({
                            title: '错误',
                            position:"top-right",
                            message: response.message,
                            offset: 100
                        });
                    }
                })
            },
            async removeComment(uid,userUid,targetUid){
                await this.$API.deleteComment(uid,userUid,targetUid);
                this.getCommentHot();
            }
        },
        mounted() {
            if (this.$store.state.login.userId != null) {
                this.isLogin = true;
                setTimeout(() => {
                    this.userImg = this.$store.state.login.userInfo.profile.avatarUrl;
                    this.userId = this.$store.state.login.userId;
                }, 500);
            }
        },
    }
</script>

<style lang="less" scoped>
    .comment{
        width: 640px;
        margin: 0 auto;
        margin-top: 50px;
        padding-bottom: 130px;
        .header{
            width: 100%;
            height: 35px;
            border-bottom: 2px solid #c20c0c;
            h3{
                float: left;
                font-size: 18px;
                color: #333;
                font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                font-weight: normal;
            }
            .num{
                float: left;
                margin: 9px 0 0 20px;
            }
        }
        .mainer{
            margin-top:20px ;
            width: 100%;
            display: block;
            .flag{
                width: 640px;
                height: 98px;
                .head{
                    width: 50px;
                    height: 50px;
                    float: left;
                    img{
                        width: 100%;
                    }
                }
                .txt{
                    float: left;
                    width: 578px;
                    height: 63px;
                    margin-left: 12px;
                    position: relative;
                    .u-txt{
                        font-size: 12px;
                        color: #333;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        width: 100%;
                        height: 63px;
                        padding: 7px 7px 7px;
                        border: 1px solid #cdcdcd;
                        border-radius: 2px;
                        line-height: 19px;
                        resize: none;
                        outline:none;
                    }
                    .arrline{
                        position: absolute;
                        left: -9px;
                        top: -6px;
                        font-size: 30px;
                        color: #cdcdcd;
                    }
                    .arrline-shadow{
                        position: absolute;
                        left: -7px;
                        top: -3.5px;
                        font-size: 27px;
                        color: #Fff;
                    }
                    .shadow{
                        width: 7px;
                        height: 18px;
                        position: absolute;
                        left: 1px;
                        top: 8px;
                        background: #fff;
                        z-index: 10;
                    }
                }
                .face-smile {
                    width: 30px;
                    font-size: 30px;
                    line-height: 20px;
                    text-align: right;
                    position: absolute;
                    margin-right: 10px;
                    cursor: pointer;

                    &.no-smile {
                        cursor: not-allowed;
                    }
                    ul{
                        opacity: .9;

                        box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);

                        margin-top: 3px;
                        position: absolute;
                        margin-left: 35px;
                        border: #4f4f4f;
                        left: 50%;
                        bottom: 0;
                        transform: translate(-50%, 104%);
                        display: flex;
                        flex-wrap: wrap;
                        width: 300px;
                        background: #FFFFFF;
                        justify-content: space-between;
                        padding: 10px;
                        border-radius: 5px;
                        z-index: 2;
                       @include boxShadow;

                        &::after {
                            content: '';
                            display: block;
                            width: 10px;
                            height: 10px;
                            background: #FFFFFF;
                            position: absolute;
                            left: 50%;
                            top: 0;
                            transform: translate(-50%,-50%) rotate(-135deg);
                            box-shadow: 1px 1px 0 0 rgba(146, 146, 146, .1);
                            z-index: 1;
                        }
                        li {
                            width: 15px;
                            height: 15px;
                            line-height: 15px;
                            text-align: center;
                            margin-bottom: 5px;
                            cursor: pointer;
                            font-size: 15px;
                        }
                    }
                }
                .btns{
                    float: left;
                    width: 578px;
                    height: 35px;
                    padding-top: 10px;
                    margin-left: 62px;

                    i{
                        display: block;
                        float: left;
                        width: 18px;
                        height: 18px;
                        margin-right: 10px;
                        background: url("images/icon.png") no-repeat;
                    }
                    .emjoy{
                        background-position: -40px -490px;
                    }
                    .at{
                        background-position: -60px -490px;
                    }
                    span{
                        float: right;
                        margin-right: 10px;
                        line-height: 25px;
                    }
                    a{
                        float: right;
                        width: 46px;
                        height: 25px;
                        text-align: center;
                        line-height:24px;
                        background: url("images/button.png") no-repeat -84px -94px;
                        color: #fff;

                        &:hover{
                            background-position: -84px -64px;
                            cursor: pointer;
                        }
                    }
                }
            }
            .new{
                display: block;
                width: 100%;
                // border-bottom: 1px solid #cfcfcf;
                margin-top: 20px;
                margin-bottom: 25px;

                .txt2{
                    margin-top: 8px;
                    float: left;
                    width: 578px;
                    height: 40px;
                    margin-left: 12px;
                    position: relative;
                    .u-txt{
                        font-size: 12px;
                        color: #333;
                        font-family: Arial, Helvetica, sans-serif;
                        -webkit-text-size-adjust: none;
                        width: 100%;
                        height: 35px;
                        padding: 7px 7px 7px;
                        border: 1px solid #cdcdcd;
                        border-radius: 2px;
                        line-height: 19px;
                        resize: none;
                        outline:none;
                    }
                    .arrline2{
                        position: absolute;
                        right: -9px;
                        top: -6px;
                        font-size: 30px;
                        color: #cdcdcd;
                    }
                    .arrline2-shadow{
                        position: absolute;
                        right: -7px;
                        top: -3.5px;
                        font-size: 27px;
                        color: #Fff;
                    }
                    .shadow2{
                        width: 7px;
                        height: 18px;
                        position: absolute;
                        right: 1px;
                        top: 8px;
                        background: #fff;
                        z-index: 10;
                    }
                }
                .face-smile {
                    width: 30px;
                    font-size: 30px;
                    line-height: 20px;
                    text-align: right;
                    position: absolute;
                    margin-right: 10px;
                    cursor: pointer;

                    &.no-smile {
                        cursor: not-allowed;
                    }
                    ul{
                        opacity: .9;

                        box-shadow: 0 0px 3px 4px rgba(64,93,230,0.6);

                        margin-top: 3px;
                        position: absolute;
                        margin-left: 35px;
                        border: #4f4f4f;
                        left: 50%;
                        bottom: 0;
                        transform: translate(-50%, 104%);
                        display: flex;
                        flex-wrap: wrap;
                        width: 300px;
                        background: #FFFFFF;
                        justify-content: space-between;
                        padding: 10px;
                        border-radius: 5px;
                        z-index: 2;
                    @include boxShadow;

                        &::after {
                            content: '';
                            display: block;
                            width: 10px;
                            height: 10px;
                            background: #FFFFFF;
                            position: absolute;
                            left: 50%;
                            top: 0;
                            transform: translate(-50%,-50%) rotate(-135deg);
                            box-shadow: 1px 1px 0 0 rgba(146, 146, 146, .1);
                            z-index: 1;
                        }
                        li {
                            width: 15px;
                            height: 15px;
                            line-height: 15px;
                            text-align: center;
                            margin-bottom: 5px;
                            cursor: pointer;
                            font-size: 15px;
                        }
                    }
                }
                .btns2{
                    float: right;
                    width: 578px;
                    height: 35px;
                    margin-top: 0px;
                    padding-top: 10px;
                    margin-right: 0px;
                    i{
                        display: block;
                        float: left;
                        width: 18px;
                        height: 18px;
                        margin-right: 10px;
                        background: url("images/icon.png") no-repeat;
                    }
                    .emjoy2{
                        background-position: -40px -490px;
                    }
                    .at{
                        background-position: -60px -490px;
                    }
                    span{
                        float: right;
                        margin-right: 10px;
                        line-height: 25px;
                    }
                    a{
                        float: right;
                        width: 46px;
                        height: 25px;
                        text-align: center;
                        line-height:24px;
                        background: url("images/button.png") no-repeat -84px -94px;
                        color: #fff;

                        &:hover{
                            background-position: -84px -64px;
                            cursor: pointer;
                        }
                    }
                }
                .itm{
                    width: 100%;
                    padding: 15px 0;
                    border-top: 1px dotted #ccc;
                    display: flex;
                    .avatar{
                        width: 50px;
                        height: 50px;
                        img{
                            width: 100%;
                        }
                    }
                    .cntwrap{
                        margin-left: 15px;
                        width: 605px;
                        .cnt>a{
                            color: #0c73c2;
                            &:hover{
                                cursor: pointer;
                                text-decoration: underline;
                            }
                        }
                        .que{
                            padding: 8px 19px;
                            margin-top: 10px;
                            line-height: 20px;
                            background: #f4f4f4;
                            border: 1px solid #dedede;

                            a{
                                color: #0c73c2;
                                &:hover{
                                    cursor: pointer;
                                    text-decoration: underline;
                                }
                            }
                        }

                        .rp{
                            margin-top: 15px;

                            .time{
                                float: left;
                                color: #999;
                            }
                            .like,.sep,.fc{
                                float: right;
                            }
                            .sep{
                                margin: 0 8px;
                            }

                            .fc{
                                color: #666;

                                &:hover{
                                    color: #666;
                                    cursor: pointer;
                                    text-decoration: underline;
                                }
                            }
                            .like{
                                .zan{
                                    margin-right: 5px;
                                    vertical-align: -2px;
                                    margin-top: -4px;
                                    width: 15px;
                                    height: 14px;
                                    display: inline-block;
                                    background: url("images/icon2.png") no-repeat;
                                    background-position: -150px 0;
                                }
                                &:hover{
                                    color: #666;
                                    cursor: pointer;
                                    text-decoration: underline;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>